<template>
	<view class="page-container">
		<!-- 顶部用户信息区域（替换图片为背景色） -->
		<view class="user-header">
			<!-- 头像区域（用背景色替代图片） -->
			<view class="avatar"></view>
			<view class="user-info">
				<text class="welcome-text">HI~欢迎回来</text>
				<!-- 根据全局状态显示登录/用户名/退出 -->
				<button class="login-btn" @click="goToLogin" v-if="!isLogin">登录</button>
				<view v-else>
					<text class="username">{{ username }}</text>
					<button class="logout-btn" @click="logout">退出登录</button>
				</view>
			</view>
		</view>

		<!-- 关注/话题区域 -->
		<view class="stats-bar">
			<text class="stats-item">关注 3</text>
			<text class="divider">|</text>
			<text class="stats-item">话题 0</text>
		</view>

		<!-- 功能按钮区域（收藏/历史/设置） -->
		<view class="func-buttons">
			<view class="func-item" @click="goToCollect">
				<view class="func-icon collect-icon"></view>
				<text class="func-text">收藏</text>
			</view>
			<view class="func-item" @click="goToHistory">
				<view class="func-icon history-icon"></view>
				<text class="func-text">历史</text>
			</view>
			<view class="func-item" @click="goToSetting">
				<view class="func-icon setting-icon"></view>
				<text class="func-text">设置</text>
			</view>
		</view>

		<!-- 发布区域 -->
		<view class="publish-section">
			<text class="publish-desc">已有385,893人在这里发布身边的新鲜事</text>
			<button class="publish-btn">我也要发布</button>
			<text class="browse-link" @click="goBrowse">先去逛逛</text>
		</view>
	</view>
</template>

<script>
export default {
  data() {
    return {
      username: "登录",
      isLogin: false
    };
  },
  onShow() {
    // 读取全局状态（参考页面的核心逻辑）
    const app = getApp();
    const name = app.globalData.username;
    const isLogin = app.globalData.isLogin;

    if (name && isLogin) {
      this.username = name;
      this.isLogin = true;
      // 更新tabBar为“我的”
      uni.setTabBarItem({
        index: 3,
        text: "我的"
      });
    } else {
      this.username = "登录";
      this.isLogin = false;
      // 恢复tabBar为“未登录”
      uni.setTabBarItem({
        index: 3,
        text: "未登录"
      });
    }
  },
  methods: {
    goToLogin() {
      uni.navigateTo({ url: "/pages/Login/Login" });
    },
    logout() {
      const app = getApp();
      // 清空全局状态
      app.globalData.username = "";
      app.globalData.isLogin = false;
      // 清空缓存
      uni.removeStorageSync("userInfo");
      // 恢复状态
      this.username = "登录";
      this.isLogin = false;
      // 恢复tabBar
      uni.setTabBarItem({
        index: 3,
        text: "未登录"
      });
      uni.showToast({ title: "已退出登录", icon: "success" });
    }
  }
};
</script>

<style scoped>
	/* 页面整体容器 */
	.page-container {
		background-color: #f8f8f8;
		min-height: 100vh;
	}

	/* 顶部用户信息区域（替换原图片为渐变背景） */
	.user-header {
		background: linear-gradient(135deg, #e63946, #d62828);
		color: #fff;
		padding: 40rpx 30rpx;
		border-radius: 0 0 20rpx 20rpx;
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	/* 头像（用背景色替代图片） */
	.avatar {
		width: 120rpx;
		height: 120rpx;
		background-color: #fff;
		border-radius: 50%;
		opacity: 0.9;
	}

	/* 用户信息文字区域 */
	.user-info {
		display: flex;
		flex-direction: column;
		gap: 10rpx;
	}

	.welcome-text {
		font-size: 32rpx;
		font-weight: 500;
	}

	/* 登录按钮样式 */
	.login-btn {
		background-color: #fff;
		color: #e63946;
		border-radius: 20rpx;
		padding: 8rpx 20rpx;
		font-size: 26rpx;
		width: fit-content;
	}

	/* 登录后的用户名样式 */
	.username {
		font-size: 30rpx;
		font-weight: bold;
		color: #fff;
	}

	/* 关注/话题统计区域 */
	.stats-bar {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 20rpx;
		padding: 20rpx 0;
		font-size: 28rpx;
		color: #333;
	}

	.divider {
		color: #ccc;
	}

	.stats-item {
		font-weight: 500;
	}

	/* 功能按钮区域（收藏/历史/设置） */
	.func-buttons {
		display: flex;
		justify-content: space-around;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #eee;
		background-color: #fff;
		margin: 20rpx;
		border-radius: 15rpx;
	}

	.func-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10rpx;
	}

	/* 功能按钮图标（背景色替代图片） */
	.func-icon {
		width: 60rpx;
		height: 60rpx;
		border-radius: 15rpx;
	}

	.collect-icon {
		background-color: #ffadad;
	}

	.history-icon {
		background-color: #a0c4ff;
	}

	.setting-icon {
		background-color: #caffbf;
	}

	.func-text {
		font-size: 26rpx;
		color: #666;
	}

	/* 发布区域 */
	.publish-section {
		background-color: #fff;
		margin: 20rpx;
		border-radius: 15rpx;
		padding: 30rpx;
		text-align: center;
	}

	.publish-desc {
		font-size: 26rpx;
		color: #999;
		margin-bottom: 20rpx;
	}

	.publish-btn {
		background-color: #e63946;
		color: #fff;
		border-radius: 25rpx;
		padding: 10rpx 30rpx;
		font-size: 28rpx;
		margin-bottom: 15rpx;
	}

	.browse-link {
		font-size: 24rpx;
		color: #666;
		text-decoration: underline;
	}
</style>